<template>
  <div class="reset-password-container">
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="120px"
      @submit.prevent="handleSubmit"
      class="reset-card"
    >
      <!-- 标题 -->
      <h2 style="text-align: center; margin-bottom: 20px;">修改密码</h2>

      <!-- 账号 -->
      <el-form-item label="账号" prop="username">
        <el-input v-model="formData.username" placeholder="请输入账号" />
      </el-form-item>

       <!-- 密码 -->
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input v-model="formData.oldPassword" type="password" show-password placeholder="请输入新密码" />
      </el-form-item>


      <!-- 密码 -->
      <el-form-item label="新密码" prop="password">
        <el-input v-model="formData.password" type="password" show-password placeholder="请输入新密码" />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="formData.confirmPassword" type="password" show-password placeholder="请再次输入密码" />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" native-type="submit" style="width: 100%">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const formData = ref({
  username: '',
  oldPassword: '',
  password: '',
  confirmPassword: ''
})

// 表单引用（用于触发验证）
const form = ref()

// 自定义验证函数：确认密码是否一致
const validateConfirmPass = (rule, value, callback) => {
  if (value !== formData.value.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

// 验证规则
const rules = ref({
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度在3到20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, message: '密码至少为6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validateConfirmPass, trigger: 'blur' }
  ]
})

import { userPasswordUpdateService } from '@/api/user.js'
import { ElMessage } from 'element-plus'

const handleSubmit = async () => {
  try {
    await form.value.validate();

    // 构造请求参数
    const passwordData = {
      old_pwd: formData.value.oldPassword,
      new_pwd: formData.value.password,
      re_pwd: formData.value.confirmPassword
    };

    // 调用接口
    const res = await userPasswordUpdateService(passwordData);

    if (res.data.code === 0) {
      ElMessage.success('密码修改成功');
      router.push('/login');
    } else {
      ElMessage.error(res.data.message || '修改失败');
    }

  } catch (error) {
    ElMessage.error('请求失败，请检查网络或输入内容');
  }
}
</script>

<style scoped lang="scss">
.reset-password-container {
  height: 750px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
}

.reset-card {
  width: 400px;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 0.6s ease-out;

  .el-form-item__content {
    transition: all 0.3s ease-in-out;
  }

  &:hover .el-form-item__content {
    transform: translateX(2px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 按钮动效 */
.el-button--primary {
  background: linear-gradient(to right, #4f46e5, #6b21a8);
  border-color: transparent;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
</style>